<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-3.6.4.min.js"></script>
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>-->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="top"></div>
<div id="modal" style="width: 60%;margin-left: 13%;margin-top: 5%">
    <div class="form-group">
        <label for="name">商品名称</label>
        <input type="text" class="form-control" id="name" >
    </div>
    <div class="form-group">
        <label for="price">商品价格</label>
        <input type="text" class="form-control" id="price"  >
    </div>
    <div class="form-group">
        <label for="stock">商品库存</label>
        <input type="text" class="form-control" id="stock" >
    </div>
    <div class="form-group">
        <label for="info">商品介绍</label>
        <input type="text" class="form-control" id="info"  >
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary">取消</button>
        <button type="button" id="finish" class="btn btn-primary">修改</button>
    </div>
</div>
<script type="text/javascript">

    $(function (){
        $("#top").load("top2.html")
        //接收列表页面传来的pid参数 并发送ajax请求获取数据
        const searchParams = new URLSearchParams(location.search);
        const pId = searchParams.get("pId");
        $.ajax({
            url:"/PDD/product?method=detail",
            data:{
                "pId":pId
            },
            dataType:"json",
            type:"POST",
            success:function (data){
                let product = data.data[0]
                $("#name").val(product.pName)
                $("#price").val(product.price)
                $("#stock").val(product.stock)
                $("#info").val(product.pInfo)
                /*const productForm = `

    <div class="form-group">
      <label for="inputName">商品名称</label>
      <input type="text" class="form-control" id="inputName" name="productName" value=${product.pName}>
    </div>
    <div class="form-group">
      <label for="inputPrice">商品价格</label>
      <input type="text" class="form-control" id="inputPrice" name="productPrice" value="${product.price}">
    </div>
    <div class="form-group">
      <label for="inputStock">商品库存</label>
      <input type="text" class="form-control" id="inputStock" name="productStock" value="${product.stock}">
    </div>
    <div class="form-group">
      <label for="inputInfo">商品介绍</label>
      <input type="text" class="form-control" id="inputInfo" name="productInfo" value="${product.pInfo}">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary">取消</button>
      <button type="button" id="finish" class="btn btn-primary">修改</button>
    </div>

`;
                $("#modal").html(productForm)*/
                //修改按钮点击事件
                $("#finish").click(function (){
                        //发送ajax请求提交数据给后端
                        $.ajax({
                            url:"/PDD/product?method=modifyProduct",
                            data:{
                                "pId":pId,
                                "pName":$("#name").val(),
                                "price":$("#price").val(),
                                "stock":$("#stock").val(),
                                "pInfo":$("#info").val()
                            },
                            type: "POST",
                            dataType: "json",
                            success:function (data){
                                if(data.code===1){
                                    alert("修改成功")
                                    window.history.back()
                                }
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                if (textStatus === "timeout") {
                                    alert("请求超时");
                                } else if (textStatus === "error") {
                                    alert("请求失败：" + errorThrown);
                                } else {
                                    alert("未知错误：" + errorThrown);
                                }
                            }
                        })
                })
            },
            error: function (jqXHR, textStatus, errorThrown) {
                if (textStatus === "timeout") {
                    alert("请求超时");
                } else if (textStatus === "error") {
                    alert("请求失败：" + errorThrown);
                } else {
                    alert("未知错误：" + errorThrown);
                }
            }
        })

    })
</script>
</body>
</html>